<template>
  <div class="checkBtn"
        :class="{isCheck : isCheckfun}" >
      <i class="icon iconfont">&#xe660;</i>
  </div>
</template>

<script>
export default {
  name: 'CheckButton',
  props: {
    isCheck: {
      type: Boolean,
      default: false
    }
  },
    methods: {

    },
    mounted() {
        console.log("检查点击事件"+this.isCheck);
    },
    computed:{
        isCheckfun(){
            console.log('isCheck发生变化了');
            return this.isCheck;
        }
    },
}
</script>

<style scoped>
   .checkBtn {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 1px solid #666;
    margin: auto 5px;
    color: white;
  }
  .checkBtn i {
    vertical-align: middle;

  }
  .isCheck {
    background-color: skyblue;
    border-color: skyblue;
  }
</style>